<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Categories &laquo; Admin</title>
  <link rel="stylesheet" href=".././static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href=".././static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href=".././static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href=".././static/assets/css/admin.css">
  <script src=".././static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
  <?php include_once 'common/nav.php'?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <div class="alert alert-danger" style='display:none'>
        <strong>错误！</strong><span id="errMsg">发生XXX错误</span>
      </div>
      <div class="row">
        <div class="col-md-4">
          <form>
            <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">slug</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
            </div>
            <div class="form-group">
              <label for="name">类名</label>
              <input id="classname" class="form-control" name="classname" type="text" placeholder="别名">
            </div>
            <div class="form-group">
              <input type="button"class="btn btn-primary" id="add"        value="添加">
              <input type="button"class="btn btn-primary" id="btn_edit"   style="display:none" value="完成编辑">
              <input type="button"class="btn btn-primary" id="btn_cancel" style="display:none" value="取消编辑">
            </div>
          </form>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a class="btn btn-danger btn-sm" href="javascript:;" id="dels" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox"></th>
                <th>名称</th>
                <th>slug</th>
                <td>类名</td>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
           
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <?php include_once 'common/aside.php'?>

  <script src=".././static/assets/vendors/jquery/jquery-1.12.2.min.js"></script>
  <script src=".././static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>NProgress.done()</script>
</body>
<script src=".././static/assets/vendors/art-template/template-web.js"></script>
<script type='text/template' id="tel">
  {{each data}}
  <tr data-categoryId="{{$value.id}}">
                <td class="text-center"><input type="checkbox"></td>
                <td>{{$value['name']}}</td>
                <td>{{$value['slug']}}</td>
                <td>{{$value['classname']}}</td>
                <td class="text-center">
               
                  <a href="javascript:;"  data-categoryId="{{$value.id}}" class="btn btn-info btn-xs" id="edit">编辑</a>
                  <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
                </td>
              </tr>
  {{/each}}
</script>
<script type='text/template' id="addtel">
  <tr data-categoryId="{{id}}">
                <td class="text-center"><input type="checkbox"></td>
                <td>{{name}}</td>
                <td>{{slug}}</td>
                <td>{{classname}}</td>
                <td class="text-center">
                  <a href="javascript:;" data-categoryId="{{id}}" class="btn btn-info btn-xs" id="edit">编辑</a>
                  <a href="javascript:;" class="btn btn-danger btn-xs del">删除</a>
                </td>
              </tr>
</script>
<script>
    $.ajax({
      type:'post',
      url:'./api/getCategories.php',
      dataType:'json',
      success:function(res){
        if(res.code==1){
        var html=template('tel',res);
        $('tbody').html(html);
        }
      }
    });

    $('#add').click(function(){
      var name=$('#name').val();
      var slug=$('#slug').val();
      var classname=$('#classname').val();

      $.ajax({
        type:'post',
        url:'./api/addcategories.php',
        data:{
          "name":name,
          "slug":slug,
          "classname":classname
        },
        beforeSend:function(){
          if(name.trim()==''||slug.trim()==''||classname.trim()==''){
             $('.alert').show();
             $('#errMsg').html('请输入完整信息');
             return false;
          }
        },
         dataType:'json',
        success:function(res){
            if(res.code==0){
              $('.alert').show();
              $('#errMsg').html(res.msg);
            }else{
              var html=template('addtel',{"name":name,"slug":slug,"classname":classname,"id":res.id});
              $(html).appendTo('tbody');
              $('.alert').hide();
              $('#name').val('');
              $('#slug').val('');
              $('#classname').val('');
            }
        }
      })
    })

//单击编辑按钮
    var currentRow=null;

     $('tbody').on('click','#edit',function(){
          $('#add').hide();
          $('#btn_edit').show();
          $('#btn_cancel').show();

         var name=$(this).parent().parent().children().eq(1).text();
         var slug=$(this).parent().parent().children().eq(2).text(); 
         var classname=$(this).parent().parent().children().eq(3).text();  

         $('#name').val(name);
         $('#slug').val(slug);
         $('#classname').val(classname);
          
          var CategoriesId=$(this).attr("data-categoryId");
          $('#btn_edit').attr('data-categoryId',CategoriesId);

          currentRow=$(this).parent().parent();
         
     })
     //更新按钮
     $('#btn_edit').click(function(){
      var name=$('#name').val();
      var slug=$('#slug').val();
      var classname=$('#classname').val();
      var id=$(this).attr('data-categoryId');

       $.ajax({
        type:'post',
        url:'api/updateCategory.php',
        data:{
          "id":id,
          "name":name,
          "slug":slug,
          "classname":classname
        },
        beforeSend:function(){
          if(name.trim()==''||slug.trim()==''||classname.trim()==''){
             $('.alert').show();
             $('#errMsg').html('请输入完整信息');
             return false;
          }
        },
         dataType:'json',
        success:function(res){
            if(res.code==0){
              $('.alert').show();
              $('#errMsg').html(res.msg);
            }else{
                  //将更新后的数再填充更新行中
              currentRow.children().eq(1).text(name);
              currentRow.children().eq(2).text(slug);
              currentRow.children().eq(3).text(classname);
              //清空
              $('.alert').hide();
              $('#name').val('');
              $('#slug').val('');
              $('#classname').val('');
            }
        }
      })
    })

//单击取消编辑按钮
     $('#btn_cancel').click(function(){
         $('#name').val('');
         $('#slug').val('');
         $('#classname').val('');

         $('#add').show();
         $('#btn_edit').hide();
         $('#btn_cancel').hide();
     })
//删除按钮
    $('tbody').on('click','.del',function(){
           var that=this;
           var id=$(this).parent().parent().attr('data-categoryId');
           
           $.ajax({
             type:'post',
              url:'./api/delCategory.php',
              data:{"id":id},
              dataType:'json',

              success:function(res){
               $(that).parent().parent().remove();
              }
        
           })
    })
//批量删除
    $('thead :checkbox').click(function(){
       var status = $(this).prop('checked');
       $('tbody :checkbox').prop('checked',status);
       if($(this).prop('checked')){
        $('#dels').show();
      }else{
         $('#dels').hide();
      }
       
    })
    $('tbody').on('click',':checkbox',function(){
        if($('tbody :checkbox').length ==$('tbody :checkbox:checked').length){
         $('thead :checkbox').prop('checked',true);
       }else{
         $('thead :checkbox').prop('checked',false);

       }
       if($('tbody :checkbox:checked').length>1){
         $('#dels').show();
      }else{
          $('#dels').hide();
      }
})
    $('#dels').click(function(){
        var arr=[];
        $('tbody :checkbox:checked').each(function(value,index){
          arr.push($(this).parent().parent().attr('data-categoryId'));
        })
        var str=arr.join();

        $.ajax({
          type:'post',
          url:'./api/delsCategory.php',
          data:{"ids":str},
          dateType:'json',
          success:function(res){
            $('tbody :checkbox:checked').parent().parent().remove();
          }
        })
    })
</script>
</html>
